<template>
  <template v-for="item in menu">
    <template v-if="validateNull(item['children'])">
      <el-menu-item
        :index="item['path']"
        :key="item['name']"
        sidebar
        :class="{ 'is-active': validActive(item) }"
        @click="open(item)"
      >
        <sidebarIcon :icon="item.icon" />
        <el-tooltip placement="right" :content="item.name" effect="dark">
          <span>{{ item.name }}</span>
        </el-tooltip>
      </el-menu-item>
    </template>

    <el-sub-menu v-else :index="item['path']" :key="item['name']">
      <template #title>
        <sidebarIcon :icon="item.icon" />
        <span>{{ item.name }}</span>
      </template>
      <template v-for="child in item['children']">
        <el-menu-item
          :index="child['path']"
          @click="open(child)"
          :class="{ 'is-active': validActive(child) }"
          v-if="validateNull(child['children'])"
          :key="child['name']"
        >
          <sidebarIcon :icon="child.icon" />
          <el-tooltip placement="right" :content="child.name" effect="dark">
            <span>{{ child.name }}</span>
          </el-tooltip>
        </el-menu-item>
        <sidebar-item v-else :menu="[child]" />
      </template>
    </el-sub-menu>
  </template>
</template>
<script>
import { mapGetters } from "vuex";
import sidebarIcon from "./sidebar-icon.vue";
import { validatenull } from "@/util/validate";

export default {
  name: "sidebarItem",
  components: {
    sidebarIcon,
  },
  data() {
    return {};
  },
  props: {
    menu: {
      type: Array,
    },
  },
  computed: {
    nowTagValue() {
      return this.$router.$quickRouter.getValue(this.$route);
    },
  },
  methods: {
    validActive(item) {
      return this.nowTagValue === item["path"];
    },
    validateNull(value) {
      return validatenull(value);
    },
    open(item) {
      if (item.type === 2) {
        window.open(item.path);
      } else {
        this.$router.push(item["path"]);
      }
    },
  },
};
</script>
